<div id="banner">
    {{hyContact[id]['nickName'] }}
    <span id="back-arrow" ng-click="backward()" ></span>
    <span id="add-people" ng-click="add()"></span>
</div>
<div id="chatting-widget">
    <table class="message" scroll-to-bottom ng-repeat="message in hyMessage | hyMessageOfSomeOne:id:hyContact:hyUser track by message.time">
        <tbody ng-switch="message.type">
        <tr ng-switch-when="message">
            <td class="message-icon" ng-show="message.sender == id" ng-click="showPersonalInfo(message.sender)">
                <img ng-src="{{'assets/'+hyContact[id].iconPath}}">
            </td>
            <td style="vertical-align: bottom;">
                <div class="message-container" ng-class="{true:'your',false:'my'}[(message.sender == id)]">
                    <pre>
                        {{message.content}}
                    </pre>
                    <span class="triangle" ng-class="{true:'left',false:'right'}[(message.sender == id)]">
                    </span>
                    <span class="triangle triangle-inner" ng-class="{true:'left',false:'right'}[(message.sender == id)]">
                    </span>
                </div>
            </td>
            <td class="message-icon" ng-hide="message.sender == id">
                <img ng-src="{{'assets/'+hyUser.iconPath}}">
            </td>
        </tr>
        <tr ng-switch-when="picMessage">
            <td class="message-icon" ng-show="message.sender == id">
                <img ng-src="{{'assets/'+hyContact[id].iconPath}}">
            </td>
            <td style="vertical-align: bottom;">
                <div class="message-container" ng-class="{true:'your',false:'my'}[(message.sender == id)]">
                    <img ng-src="{{'assets/'+message['picPath']}}" style="max-width:200px"/>
                    <span class="triangle" ng-class="{true:'left',false:'right'}[(message.sender == id)]">
                    </span>
                    <span class="triangle triangle-inner" ng-class="{true:'left',false:'right'}[(message.sender == id)]">
                    </span>
                </div>
            </td>
            <td class="message-icon" ng-hide="message.sender == id">
                <img ng-src="{{'assets/'+hyUser.iconPath}}">
            </td>
        </tr>
        </tbody>
    </table>
    <div class="text-center offline-tip" blink ng-hide="hyContact[id]['online']" >
        对方离线,信息发送功能关闭
    </div>
    <div class="text-center offline-tip" blink ng-show="hyContact[id]['online']" >
        对方在线,信息发送功能开启
    </div>
</div>

<div id="message-input-container">
    <div class="row">
        <div class="col-xs-12  text-center">
            <div class="col-xs-8" style="padding: 0">
                <textarea  id="message-input" placeholder="输入聊天信息" ng-model="content" ng-disabled="!hyContact[id].online"></textarea>
            </div>
            <div class="col-xs-2" style="padding: 0">
                <span class="chat-pic-input file-input-span">
                    <input type="file" nv-file-select="" uploader="uploader"  multiple />
                </span>
            </div>
            <div class="col-xs-2" style="padding: 0;">
                <button type="button" ng-click="respond()" class="btn btn-block btn-main btn-blue" ng-disabled="!hyContact[id].online">回复</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="inviteModal" tabindex="-1" role="dialog" aria-labelledby="msgModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">邀请加入群聊 </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="contact" ng-repeat="contact in hyContact | hyContactToInvite:id" style="padding: 0px;margin-bottom: 10px">
                        <div class="contact-icon">
                            <img ng-src="{{'assets/'+contact.iconPath}}" alt="头像"/>
                            <span class="grey-cross" ng-hide="contact.online"></span>
                        </div>
                        <span>{{contact.nickName}}</span>
                        <input type="checkbox" class="invite-checkbox" ng-model="inviteList[contact.id]"/>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" ng-click="sendInvite()" class="btn btn-main btn-blue btn-block">发送</button>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="infoModal" tabindex="-1" role="dialog" >
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">用户个人资料</h4>
            </div>
            <div class="modal-body">
                <div class="config-protrait">
                    头像
                    <img class="portrait" ng-src="{{'assets/'+infoPeople.iconPath}}" alt="" style="right:0px" />
                </div>
                <div class="config-item">
                    <span>昵称</span>
                    <span class="item-content">{{infoPeople.nickName}}</span>
                </div>
                <div class="config-item" ng-show="infoPeople.public">
                    <span>个性签名</span>
                    <span class="item-content">{{infoPeople.motto}}</span>
                </div>
                <div class="config-item" ng-show="infoPeople.public">
                    <span>具体坐标</span>
                    <span class="item-content">{{infoPeople.position}}</span>
                </div>
                <div class="config-item" ng-show="infoPeople.public">
                    <span>年龄</span>
                    <span class="item-content">{{infoPeople.age}}</span>
                </div>
            </div>
        </div>
    </div>
</div>